<template>
	<div class="main-2">
		<div v-if="!isChecked" class="off"></div>
		<div class="on" v-if="isChecked"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {};
		},
		props: {
			isChecked: {
				type: [Boolean, Number]
			}
		},
		methods: {}
	};
</script>

<style scoped lang="scss">
	.main-2 {
		width: 30rpx;
		height: 30rpx;
		box-sizing: border-box;
		font-size: 0;

		.off {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			border-radius: 50%;
			border: 1px solid #c2c2c2;
		}

		.on {
			background: url('../static/icon/checked.png') no-repeat center;
			background-size: 100% 100%;
			width: 100%;
			height: 100%;
			display: block;
			box-sizing: border-box;
		}
	}
</style>